<template>
	<view class="content">
		<view style="width: 100%; margin: 0 auto;">
			<u-search placeholder="请输入关键字搜索" v-model="keyword" search-icon-color="#7a7a7a"
				placeholder-color="#7A7A7A" :show-action="true" bg-color="#f5f5f5" 
				action-text="搜索"
				@search="searchKeyword"
				@custom="searchKeyword"
				:animation="false"
				:input-style="{'fontSize': '24' + 'upx', 'width': 'calc(100% - 50rpx)'}" style="width: calc(100% - 50rpx);
		   margin: 0 auto;"></u-search>
		</view>
		<swiper class="swiperlist">
			<!-- <u-swiper :list="swiperlist" name="thumb" @click="swiperlink"></u-swiper> -->
			<!-- 如果轮播图多张 -->
			<swiper-item class="swiper-item" v-for="(item,index) in swiperlist" :key="index">
				<image :src="item.thumb" @click="swiperlink(item)"></image>
			</swiper-item>
		</swiper>
		<view class="balance-row x-bc">
			<view class="balance-box" @click="goBalance">
				<view class="desc-font">我的津贴</view>
				<view class="x-bc" style="margin: 22rpx 22rpx 0 22rpx;">
					<view class="money-font">{{userInfo.integral_show.data}}</view>
					<view class="view-detail-btn">查看</view>
				</view>
			</view>
			
			<view class="diamong-box" @click="goDiamond">
				<view class="desc-font">我的红包</view>
				<view class="x-bc" style="margin: 22rpx 22rpx 0 22rpx;">
					<view class="money-font">{{userInfo.love_show.usable_data}}</view>
					<view class="view-detail-btn">查看</view>
				</view>
			</view>
		</view>
		<!-- tab -->
		<!-- <scroll-view scroll-x class="tabs-content" enable-flex scroll-with-animation>
			<view class="order-nav">
				<view class="nav-item" v-for="(nav, index) in orderState"  :key="index"
					@tap="onNav(index, nav)">
					<view class="item-title" :class="{ 'item-title-active': tabindex === index }">{{ nav.name }}</view>
					<view class="nav-line" :class="{ 'line-active': tabindex === index }"></view>
				</view>
			</view>
		</scroll-view> -->
		
		<view class="nav">
			<scroll-view scroll-x="true" class="scroll-view_H" enable-flex="true" >
				<view class="nav__item" :class="tabIdx == item.id ? '--focus' : ''" v-for="(item,index) in navList"
					:key="index" @click="changeNavItem(item.id)">
					{{item.name}}
					<view class="nav__bottom" v-if="tabIdx == item.id"></view>
				</view>
			</scroll-view>
			
		</view>
		
		<view class="chengtuan-box">
			<mescroll-body ref="mescrollRef" height="1050" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="chengtuan-list x-ac">
				<view class="chengtuan-item"
				@click="junit('/pages/mall/goods-detail/goods-detail', {goodsId: item.goodid});"
				v-for="(item, index) in homeCollage" :key="index">
					<view class="goods-img">
						<image mode="widthFix" style="width: 100%;" :src="item.thumb"></image>
					</view>
					<view class="goods-content">{{item.title}}</view>
					<view class="goods-price">{{item.x_price}}<text v-if="item.x_str"> + {{item.x_str}}</text></view>
				</view>
				
				<view class="chengtuan-item">
					
				</view>
			</view>
			</mescroll-body>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex';
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				keyword: '',
				title: 'Hello',
				swiperlist: [],
				tabindex: 0,
				orderState: [],
				homeCollage: [],
				tabList: [],
				navList: [],
				type: 0,
				page: 1,
			}
		},
		async onLoad() {
			//await this.gethomePagWxapp();
			this.getswiperlist();
			// await this.getfightGroupsHome();
			this.getCollageTab();
		},
		onShow() {
			this.getUserPrefile();
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			...mapActions(['getUserPrefile']),
			// 获取轮播图数据
			getswiperlist() {
				this.$api.get('/addons/yun_shop/api.php?route=home-page.sliads&is_lb=2').then(res => {
					this.swiperlist = res.data
					console.log(res.data,'aaaa');
				})
				// 请求示例    url , 所需参数, 项目配置
				// this.$http.get('/addons/yun_shop/api.php?i=3&type=2&route=test.sliads&ingress=weChatApplet&validate_page=1&app_type=wechat',{}, {'paramsType': 2}).then(res => {
				
				// 	this.swiperlist = res.data
				// })
			},
			// 点击轮播图
			swiperlink(e) {
				uni.navigateTo({
					url: e.link
				})
			},
			junit(url, query = {}) {
				this.$Router.push({
					path: url,
					query: query
				});
			},
			onNav(index, nav) {
				this.tabindex = index;
				this.type = nav.id;
				this.page = 1;
				this.downCallback();
			},
			// 点击导航栏切换
			changeNavItem(id) {
				this.tabIdx = id;
				this.page = 1;
				this.homeCollage = [];
				this.downCallback();
			},
			getCollageTab() {
				this.$api.get('/addons/yun_shop/api.php?route=goods.category.category-home').then(res => {
					if (res.result == 1) {
						console.log(res.data, '分类213312312321312');
						this.navList = res.data.category.data;
						this.tabIdx = res.data.category.data[0].id;
					}
				})
			},
			// 下拉刷新列表
			downCallback() {
				this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
			},
			/*上拉加载的回调*/
			upCallback(page) {
				this.page = page.num;
				this.$api.get('/addons/yun_shop/api.php?route=home-page.goodsList', {
					page: this.page,
					keyword: this.keyword,
					cate_id: this.tabIdx
				}).then(res => {
					console.log(res);
					let curPageData = res.data;
					let curPageLen = curPageData.length;
					let totalCount = res.data.total;
					if (page.num == 1) this.homeCollage = []; //如果是第一页需手动置空列表
					this.homeCollage = this.homeCollage.concat(curPageData); //追加新数据
					this.mescroll.endBySize(curPageLen, totalCount);
				})
			},
			/*上拉加载的回调*/
			searchKeyword() {
				this.page = 1;
				this.$api.get('/addons/yun_shop/api.php?route=home-page.goodsList', {
					page: 1,
					keyword: this.keyword
				}).then(res => {
					console.log(res);
					let curPageData = res.data;
					let curPageLen = curPageData.length;
					let totalCount = res.data.total;
					this.homeCollage = curPageData; //追加新数据
					this.mescroll.endBySize(curPageLen, totalCount);
				})
			},
			// 获取拼团分类 
			gethomePagWxapp(){
				return this.$http.get('hotGroup.homePagWxapp').then(res => {
					this.orderState = res.data;
					this.type = this.orderState[0]['id'];
				})
			},
			// 即将成团数据
			getfightGroupsHome(){
				// this.$http.get('index.fightGroupsHomeCollage', {
				// 	i:3,
				// 	uuid:0,
				// 	type:this.type,
				// 	basic_info:1,
				// 	validate_page:1,
				// 	route: 'plugin.fight-groups.frontend.controllers.fight-groups.homeCollage'
				// }).then(res => {
				// 	this.homeCollage = res.data.data;
				// })
			},
			goBalance () {
				uni.navigateTo({
					url: '/pages/prefile/my-allowance/my-allowance'
				})
			},
			goDiamond () {
				uni.navigateTo({
					url: '/pages/prefile/my-diamond/my-diamond'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './hot-group.scss';
	uni-image {
		width: 100%;
		height: 100%;
	}
</style>
